<template>
    <div
        class="mysidebarright widthmaxcontent"
        :style="{
            'max-width': `400px`,
            'max-height': maxheight,
            top: top + 'px',
            left: left + 'px',
        }"
    >
        <aside
            class="widthmaxcontent"
            ref="sidebarright"
            v-show="!!html"
            style="max-height: inherit; overflow: auto; max-width: 400px"
        >
            <div
                class="widthmaxcontent"
                v-html="html"
                style="max-height: inherit; overflow: auto; max-width: 400px"
            />
        </aside>
    </div>
</template>

<script lang="ts" src="./Sidebarright.ts"></script>

<style scoped>
.widthmaxcontent {
    width: max-content;
}
.mysidebarright {
    width: fit-content;
    margin-bottom: 5px;
    max-width: 400px;
    padding-bottom: 5px;
    border: 1px solid white;
    position: fixed;
    background-color: white;
}
@media (min-width: 550px) {
    .mysidebarright {
        width: fit-content;
        max-width: 400px;
        text-align: left;
    }
}
@media (max-width: 550px) {
    .mysidebarright {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
}
</style>
